<template>
  <div class="box-main">
    <div v-if="!showPatientInfo" style="width: 100%; height: 100%">
      <div class="topHeaderCard">
        <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)" ghost>
          返回
        </a-button>
      </div>
      <div class="bax-main-content">
        <div class="page-content">
          <a-card style="width: 100%; height: 100%">
            <div class="header">
              <Condition
                :condition="condition"
                :btns="['search', 'reset']"
                @search="searchHandle"
                @reset="reset"
              />
              <span> 共筛选出 {{ pagination.total }} 条数据 </span>
            </div>
            <div class="main">
              <a-table
                class="table"
                size="small"
                :loading="loading"
                :dataSource="List"
                :columns="columns"
                :pagination="pagination"
                @change="paginationChange"
                :sticky="{ offsetHeader: 0 }"
              >
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.dataIndex == 'no'">
                    {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
                  </template>
                  <template v-else-if="column.dataIndex == 'peStaffName'">
                    <span @click="toDetail(record)" style="color: #1677ff; cursor: pointer">
                      {{ record.peStaffName }}
                      {{ record.gender }}
                      {{ record.age || '' }}
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex == 'buyTime'">
                    <template v-if="record.buyTime">
                      <span>{{ dayjs(record.buyTime).format('YYYY-MM-DD HH:mm') }}</span>
                      ~
                      <span>{{
                        dayjs(record.expiredTime).format('YYYY-MM-DD HH:mm') || '--'
                      }}</span>
                    </template>
                    <template v-else>--</template>
                  </template>
                  <template v-else-if="column.dataIndex == 'createTime'">
                    {{
                      record.createTime
                        ? dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss')
                        : ''
                    }}
                  </template>
                  <template v-else-if="column.dataIndex == 'peLatestMedicalTime'">
                    {{
                      record.peLatestMedicalTime
                        ? dayjs(record.peLatestMedicalTime).format('YYYY-MM-DD HH:mm:ss')
                        : '/'
                    }}
                  </template>
                  <template v-else-if="column.dataIndex == 'jobType'">
                    <span v-if="record.jobType">{{ record.jobType }}</span>
                    <span v-else>/</span>
                  </template>
                  <template v-else-if="column.dataIndex == 'peStaffStatus'">
                    <span v-if="record.peStaffStatus === 'on'">在职</span>
                    <span v-if="record.peStaffStatus === 'off'">离职</span>
                  </template>
                  <template v-else-if="column.dataIndex == 'peLatestMedicalStatus'">
                    <span style="color: #00b42a" v-if="record.peLatestMedicalTime">
                      <CheckCircleFilled two-tone-color="#00B42A" />
                      已生成
                    </span>
                    <span style="color: #ff7d00" v-else>
                      <ExclamationCircleFilled two-tone-color="#ff7d00" />
                      未生成
                    </span>
                  </template>
                  <template v-else-if="column.dataIndex === 'action'">
                    <a-button type="link" @click="toDetail(record)">详情</a-button>
                  </template>
                </template>
              </a-table>
            </div>
          </a-card>
        </div>
      </div>
    </div>

    <PatientInfo ref="patientInfoRef" v-if="showPatientInfo" @close="gopatientBack" />
  </div>
</template>
<script lang="ts" setup>
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import Condition from '@/components/ConditionSearch/index.vue'
import { ref, onMounted, reactive, h } from 'vue'
import dayjs from 'dayjs'
import { getGroupInspectionStaffList, getQuestionnaire } from './groupInspection.api'
import PatientInfo from '@/views/examinatePatients/patientInfo.vue'
import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const peOrgId = ref('')
const showPatientInfo = ref<boolean>(false)
const emit = defineEmits(['close'])
const loading = ref<boolean>(false)
const List = ref<any[]>([])
const condition = ref([
  {
    title: '',
    dataIndex: 'keywords',
    type: 'input',
    value: '',
    placeholder: '请输入姓名/手机号/证件号'
  },
  {
    title: '',
    dataIndex: 'reportState',
    type: 'select',
    data: [
      {
        label: '未生成',
        value: 'no'
      },
      {
        label: '已生成',
        value: 'yes'
      }
    ],
    value: undefined,
    placeholder: '请选择体检报告状态'
  },
  {
    title: '报告生成时间',
    dataIndex: 'createTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  }
])
const columns = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '患者姓名',
    dataIndex: 'peStaffName',
    key: 'peStaffName',
    align: 'left'
  },
  {
    title: '手机号',
    dataIndex: 'peStaffPhone',
    key: 'peStaffPhone',
    align: 'left'
  },
  {
    title: '证件号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'left'
  },
  {
    title: '部门',
    dataIndex: 'departmentName',
    key: 'departmentName',
    align: 'left'
  },
  {
    title: '岗位',
    dataIndex: 'jobType',
    key: 'jobType',
    align: 'left'
  },
  {
    title: '状态',
    dataIndex: 'peStaffStatus',
    key: 'peStaffStatus',
    align: 'left',
    width: 80
  },
  {
    title: '会员有效期',
    dataIndex: 'buyTime',
    key: 'buyTime',
    align: 'left'
  },
  {
    title: '导入时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left'
  },
  {
    title: '报告生成时间',
    dataIndex: 'peLatestMedicalTime',
    key: 'peLatestMedicalTime',
    align: 'left'
  },
  {
    title: '体检报告状态',
    dataIndex: 'peLatestMedicalStatus',
    key: 'peLatestMedicalStatus',
    align: 'left',
    width: 120
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 100
  }
])
const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}
const getDataList = () => {
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      if (v.dataIndex == 'createTime') {
        return Object.assign(c, {
          start: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
          end: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
        })
      } else {
        return Object.assign(c, { [v.dataIndex]: v.value })
      }
    } else {
      return c
    }
  }, {})
  getGroupInspectionStaffList({
    ...obj,
    peOrgId: peOrgId.value,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
const init = (orgId: string) => {
  peOrgId.value = orgId
  loading.value = true
  getDataList()
}

const searchHandle = () => {
  pagination.value.current = 1
  loading.value = true
  getDataList()
}
const reset = () => {
  pagination.value.current = 1
  pagination.value.pageSize = 10
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}

const resetBack = () => {
  emit('close')
}

const patientInfoRef = ref()
const toDetail = (data: any) => {
  showPatientInfo.value = true
  nextTick(() => {
    patientInfoRef.value.initRouterInfo({ empi: data.empi, type: '8', peOrgId: peOrgId.value })
  })
}

const gopatientBack = () => {
  showPatientInfo.value = false
  loading.value = true
  getDataList()
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.box-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 24px;
    background-color: #fff;

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .bax-main-content {
    width: 100%;
    height: calc(100% - 50px);
    padding: 16px;
    overflow: hidden auto;

    .page-content {
      display: flex;
      width: 100%;
      height: 100%;
    }
  }
}

.header {
  display: flex;
  justify-content: space-between;
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
}
</style>
